<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>电灯开关</title>
    <style>
        #light{
            margin: auto;
        }
    </style>
</head>
<body>
    <img id="light" src="img/off.gif">

<script>
    /*
        分析:
            1.获取图片对象
            2.绑定单击事件
            3.每次点击切换图片
                规则:
                    如果灯是打开的 on,切换图片为 off
                    如果灯是关闭的 off,切换图片为 on
                使用 flag 来完成
     */
    //1.获取图片对象
    var light = document.getElementById("light");

    var flag = false;//代表等是灭的 off 图片

    //2.绑定单击事件
    light.onclick = function () {
        if (flag){//判断 如果灯是开的,则灭掉
            light.src = "img/off.gif";
            flag = false;
        }else{
            light.src = "img/on.gif";
            flag = true;
        }
    }
</script>


</body>
</html>